<!DOCTYPE html>
<html>
<style>
    body {
    / / background: url("");
        width: 100%;
    }
</style>
<head lang="en">
    <title>搜索功能</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/strategy.css"/>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/common.js"></script>

    <script>
        $(function () {
            //接受存储的关键字
            var keywordInSession = sessionStorage.getItem("keyword");
            $("#keyword").val(keywordInSession);

            //搜索按钮点击事件
            $("#select").click(function () {
                var keyword = $("#keyword").val();
                {
                    sessionStorage.setItem("keyword", keyword);
                    window.location.href = "/search.html";
                }
            });


            //--------------------------大攻略----------------------------------

            ///当前页,初始值为1
            var currentPage1 = 1;
            //总页数
            var pages1 = 1;

            //搜索攻略
            function queryForStrategy() {
                //把所有有关键字的攻略查出来
                $.get("/search/strategies", {keyword: keywordInSession, currentPage: currentPage1}, function (data) {
                    $('#strategyTotal').html(data.total);
                    $.each(data.list, function (index, ele) {
                        //克隆模板
                        var template = $('#template1>div:first').clone();
                        //拼接
                        template.find('a:first').attr("href", "strategyCatalogs.html?id=" + ele.id);
                        template.find('img:first').attr("src", ele.coverUrl);
                        template.find('p:first').html(ele.title);
                        $('#strategyBtn').append(template);
                    });
                    pages1 = data.pages;//给总页数赋值
                });
                currentPage1++;
            }

            queryForStrategy();


            //--------------------------游记----------------------------------


            //当前页,初始值为1
            var currentPage2 = 1;
            //总页数
            var pages2 = 1;

            //查游记
            function queryForTravel() {
                $.get("/search/travels", {keyword: keywordInSession, currentPage: currentPage2}, function (data) {
                    $('#travelTotal').html(data.total);
                    $.each(data.list, function (index, ele) {
                        //克隆模板
                        var template = $('#template2>div:first').clone();
                        //拼接
                        template.find('a:first').attr("href", "travelContent.html?id=" + ele.id);
                        template.find('img:first').attr("src", ele.coverUrl);
                        template.find('p:first').html(ele.title);
                        $('#travelBtn').append(template);
                    });
                    pages2 = data.pages;//给总页数赋值
                });
                currentPage2++;
            }

            queryForTravel();


            //-----------------------日报-------------------------------------

            //当前页,初始值为1
            var currentPage3 = 1;
            //总页数
            var pages3 = 1;

            function queryForNews() {
                //先来一个简单的,把所有有关键字的攻略查出来
                $.get("/search/newPages", {keyword: keywordInSession, currentPage: currentPage3}, function (data) {
                    //显示总条数
                    $('#newsTotal').html(data.total);
                    //循环游记的个数
                    $.each(data.list, function (index, ele) {
                        var template = $('#template3>div:first').clone();
                        template.find('a:first').attr("href", "newsPage.html?id=" + ele.id);
                        template.find('img:first').attr("src", ele.coverUrl);
                        template.find('p:first').html(ele.title);
                        $('#newPageBtn').append(template);

                    });
                    pages3 = data.pages;//给总页数赋值
                });
                currentPage3++;
            }

            queryForNews();


            //-----------------------用户----------------------------------------------------------

            //当前页,初始值为1
            var currentPage4 = 1;
            //总页数
            var pages4 = 1;

            function queryForUser() {
                //走,下一个查用户
                $.get("/search/users", {keyword: keywordInSession, currentPage: currentPage4}, function (data) {
                    //显示总条数
                    $('#userTotal').html(data.total);
                    console.log(data);
                    //循环游记的个数
                    $.each(data.list, function (index, ele) {
                        var template = $('#template4>div:first').clone();
                        template.find('a:first').attr("href", "userProfiles.html?id=" + ele.id);
                        template.find('.rounded-circle').attr("src", ele.headImgUrl);
                        template.find('#nickNameBtn').html(ele.nickName);
                        template.find('#genderBtn').html(ele.genderName);
                        template.find('#signBtn').html(ele.sign);

                        $('#userBtn').append(template);
                    });
                    pages4 = data.pages;//给总页数赋值
                });
                currentPage4++;
            }

            queryForUser();


            //----------------------------------------------------------

            //监听鼠标滚动事件
            $(window).scroll(function () {
                //当文档滚上去的高度+窗口的高度>=html整个文档的高度,
                if ($(document).scrollTop() + $(window).height() >= $(document).height() - 1) {
                    //并且当前页小于等于总页数时,执行分页查询
                    if ($("#pills-1-tab").hasClass('show')) {
                        if (currentPage1 <= pages1) {
                            queryForStrategy();
                        } else {
                            $(document).dialog({
                                type: 'notice',
                                content: '<span class="info-text">已经到底了!</span>',
                                autoClose: 1500
                            });
                        }
                    } else if ($("#pills-2-tab").hasClass('show')) {
                        if (currentPage2 <= pages2) {
                            queryForTravel();
                        } else {
                            $(document).dialog({
                                type: 'notice',
                                content: '<span class="info-text">已经到底了!</span>',
                                autoClose: 1500
                            });
                        }
                    } else if ($("#pills-4-tab").hasClass('show')) {
                        if (currentPage4 <= pages4) {
                            queryForUser();
                        } else {
                            $(document).dialog({
                                type: 'notice',
                                content: '<span class="info-text">已经到底了!</span>',
                                autoClose: 1500
                            });
                        }
                    } else if ($("#pills-3-tab").hasClass('show')) {
                        if (currentPage3 <= pages3) {
                            queryForNews();
                        } else {
                            $(document).dialog({
                                type: 'notice',
                                content: '<span class="info-text">已经到底了!</span>',
                                autoClose: 1500
                            });
                        }
                    }
                }
            });
        });
    </script>

</head>

<body>

<!--攻略-->
<div id="template1" style="display: none">
    <div class="row hot">
        <br>
        <div class="col-12 strategies">
            <a>
                <img>
                <p></p>
            </a>
        </div>
    </div>
</div>

<!--游记-->
<div id="template2" style="display: none">
    <br/>
    <div class="row hot">
        <div class="col-12 travels">
            <a>
                <img>
                <p></p>
            </a>
        </div>
    </div>
</div>

<!--日报-->
<div id="template3" style="display: none">
    <br/>
    <div class="row hot">
        <div class="col-12 newPages">
            <a>
                <img>
                <p></p>
            </a>
        </div>
    </div>
</div>

<!--用户-->
<div id="template4" style="display: none">
    <br/>
    <div class="row hot horizontal-line" style="padding: 10px 0;border-bottom: 1px solid #aaa;margin-bottom: 20px;">
        <div class="col-4">
            <a href="">
                <img class="rounded-circle" src=""
                     style="width: 70px">
            </a>
        </div>
        <div class="col-8">
            <div>
                <h5> 昵称: <span id="nickNameBtn">喵喵叫</span></h5>
            </div>
            <div>
                <h6> 性别:<span id="genderBtn">保密</span></h6>
            </div>
            <div>
                <h6> 签名:<span id="signBtn">我是胡汉三</span></h6>
            </div>
            <div>
                <p></p>
            </div>
        </div>
        <div ></div>
    </div>

</div>


<div class="search-head">
    <div class="row nav-search">
        <div class="col-1">
            <a href="javascript:void(window.history.length > 1 ? window.history.back() : document.location.href='index.html')">
                <span><i class="fa fa-chevron-left fa-2x"></i></span>
            </a>
        </div>
        <div class="col-7">
            <div class="input-group-sm search">
                <input class="form-control" placeholder="请搜索攻略/游记/日报/用户" id="keyword">
            </div>
        </div>
        <div class="col-1">
            <i class="fa fa-search" id="select"
               style="color:white;font-size:25px;position: absolute;top: 23%;left: 88%"></i>
        </div>
    </div>
</div>


<ul class="nav nav-pills nav-justified border border-left-0 border-top-0 border-right-0" id="pills-tab" role="tablist">
    <li class="nav-item">
        <a data-id="1" class="nav-link active show" id="pills-1-tab" data-toggle="pill" href="#pills-1">
            攻略[<span id="strategyTotal"></span>]</a>
    </li>
    <li class="nav-item">
        <a data-id="2" class="nav-link" id="pills-2-tab" data-toggle="pill" href="#pills-2">
            游记[<span id="travelTotal"></span>]</a>
    </li>
    <li class="nav-item"><a data-id="3" class="nav-link" id="pills-3-tab" data-toggle="pill" href="#pills-3">
        日报[<span id="newsTotal"></span>]</a>
    </li>
    <li class="nav-item"><a data-id="4" class="nav-link" id="pills-4-tab" data-toggle="pill" href="#pills-4">
        用户[<span id="userTotal"></span>]</a>
    </li>
</ul>

<div class="tab-content" id="pills-tabContent">
    <div class="tab-pane fade active show" id="pills-1">
        <span render-html="pages"></span>
        <div class="container" render-loop="list" id="strategyBtn">
        </div>

    </div>
    <div class="tab-pane fade" id="pills-2">
        <div class="container" id="travelBtn">

        </div>

    </div>

    <div class="tab-pane fade" id="pills-3">
        <div class="container" id="newPageBtn">

        </div>

    </div>
    <div class="tab-pane fade" id="pills-4">

        <div class="container" id="userBtn">

        </div>

    </div>
</div>
</div>
</body>

</html>